<template>
	<view style="padding: 20px;min-height: 100.1vh">
		<view style="background-color: #fff;  border-radius: 10rpx; margin-bottom: 30rpx;">
			<uni-segmented-control :current="typeCurrent" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view v-if="typeCurrent === 0"
			style="width: 100%;background-color: #fff;border-radius: 15rpx;height: 200rpx;margin-bottom: 20rpx;"
			v-for="(item,index) in devicetData" :key="index" @click="gotoPage('/pages/index/deviceInfo', item)">
			<view style="display: flex;">
				<view style="width: 30%;padding: 40rpx 20rpx;">
					<image :src="'../../static/images/1.svg'"
						style="width: 90rpx;height: 90rpx;margin-top: 10rpx;margin-left:40rpx"></image>

				</view>
				<view style="width: 57%;padding: 40rpx 20rpx;">
					<view style="font-weight: 700;font-size: 18px;margin-bottom: 15rpx;">{{item.name}}</view>
					<view v-if="item.d_run ==='运行'"
						style="background-color:#19d826 ;color: #fff;width: 80rpx;text-align: center;border-radius:15rpx">
						运行
					</view>
					<view v-else
						style="background-color:#878787 ;color: #fff;width: 70rpx;text-align: center;border-radius:15rpx">
						停止
					</view>
				</view>
				<view style="width: 18%;padding: 40rpx 0rpx 40rpx 20rpx;">
					<view v-if="item.d_err ==='正常'"
						style="font-weight: 700;font-size: 14px;height: 50rpx;line-height: 50rpx;
					margin-bottom: 15rpx;background:linear-gradient(to right,#68f26b,#25b41e);border-radius: 30rpx 0 0 0;color: #fff;text-align: center;">
						{{item.d_err}}
					</view>
					<view v-else
						style="font-weight: 700;font-size: 14px;height: 50rpx;line-height: 50rpx;
						margin-bottom: 15rpx;background:linear-gradient(to right,#fccccc,#b4210e);border-radius: 30rpx 0 0 0;color: #fff;text-align: center;">
						{{item.d_err}}
					</view>

				</view>
			</view>
			<view
				style="color: #999;margin-top: -40rpx;text-align: right;width: auto;margin-right: 40rpx;margin-left: 40rpx;border-top: 1px dashed #e3e3e3;height: 50rpx;line-height: 50rpx;">
				{{item.monitorDate}}
			</view>
		</view>
		<view v-if="typeCurrent === 1"
			style="width: 100%;background-color: #fff;border-radius: 15rpx;height: 200rpx;margin-bottom: 20rpx;"
			v-for="(item,index) in devicetData" :key="index">
			<view style="display: flex;">
				<view style="width: 30%;padding: 40rpx 20rpx;">
					<image :src="'../../static/images/3.svg'"
						style="width: 90rpx;height: 90rpx;margin-top: 20rpx;margin-left:40rpx"></image>

				</view>
				<view style="width: 57%;padding: 40rpx 20rpx;">
					<view style="font-weight: 700;font-size: 18px;margin-bottom: 15rpx;">{{item.name}}</view>
					<view><span
							style="font-size: 16px;color: #00aaff;font-weight: 700;">{{item.realValue}}</span><span>{{item.unit}}</span>
					</view>

				</view>
				<view style="width: 18%;padding: 40rpx 0rpx 40rpx 20rpx;">
					<view v-if="item.d_err ==='正常'"
						style="font-weight: 700;font-size: 14px;height: 50rpx;line-height: 50rpx;
					margin-bottom: 15rpx;background:linear-gradient(to right,#68f26b,#25b41e);border-radius: 30rpx 0 0 0;color: #fff;text-align: center;">
						{{item.d_err}}
					</view>
					<view v-else
						style="font-weight: 700;font-size: 14px;height: 50rpx;line-height: 50rpx;
						margin-bottom: 15rpx;background:linear-gradient(to right,#fccccc,#b4210e);border-radius: 30rpx 0 0 0;color: #fff;text-align: center;">
						{{item.d_err}}
					</view>

				</view>
			</view>
			<view
				style="color: #999;margin-top: -50rpx;text-align: right;width: auto;margin-right: 40rpx;margin-left: 40rpx;border-top: 1px dashed #e3e3e3;height: 50rpx;line-height: 50rpx;">
				{{item.monitorDate}}
			</view>
		</view>
		<view v-if="isFinish" style="text-align: center;">加载更多</view>
		<view v-if="isNoMore" style="text-align: center;">——没有更多数据啦——</view>
	</view>
</template>
<!-- craftName	String	工艺段名称
equipmentName	String	设备名称
productName	String	产品名称-购买名称
equipmentNum	String	设备编号
deviceType	String	设备大类
equipmentLevel	String	设备等级
madeIn	String	产地
produceDate	Date	出场日期
brand	String	品牌
supplier	String	供应商
flag	int	0:正常使用 1:备用 2:报废 3:库存
craftPic	String	设备对应二维码图片
picUrl	String	设备图片地址 -->
<script>
	import {
		queryWorkingCondition
	} from "@/api/index"
	import {
		getToken,
		setToken,
		removeToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				form: {},
				devicetData: [],
				pageSize: 10,
				pageNum: 0,
				pageTotal: 0,
				isFinish: false,
				isNoMore: false,

				typeCurrent: 0,
				activeColor: '#727e8b',
				styleType: 'button',
				items: ['设备', '仪表'

				],
			}
		},
		onLoad: function(option) {
			this.form.craftName = JSON.parse(option.item).craftName;
		},
		onReady() {
			this.getServerData1();
		},
		methods: {
			getServerData1() {

				uni.showLoading({
					title: '加载中'
				});
				this.devicetData = [];
				this.form.workType = this.items[this.typeCurrent]
				queryWorkingCondition(this.form).then(response => {
					// 使用示例
					var list = response;
					console.info('aaaaaaa', response)
					this.devicetData = list

					this.isFinish = false

					console.log('上拉加载停止')
					uni.stopPullDownRefresh()
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
				})

			},
			gotoPage(url, item) {
				console.log("--------", JSON.stringify(item))

				console.log("--------", url)
				uni.navigateTo({
					url: url + '?item=' + JSON.stringify(item)+'&craftName='+this.form.craftName
				})
			},
			// 下拉刷新
			onPullDownRefresh() {
				console.log('下拉刷新')
				this.getServerData1();
				setTimeout(() => {
					console.log('下拉刷新停止')
					uni.stopPullDownRefresh()
				}, 2000)
			},
			// 上拉加载
			// onReachBottom() {
			// 	console.log('上拉加载')
			// 	this.isFinish = true
			// 	this.pageNum++;
			// 	this.getServerData1();

			// },
			onClickItem(e) {
				console.log(e)
				this.typeCurrent = e.currentIndex

				this.form.type = '维修';
				this.getServerData1();
			},
		}
	}
</script>

<style>

</style>